<template>
  <div class="sou">
      <div class="top">
          <input type="text" @keydown.enter="fun($event)" placeholder="搜索目的地/攻略/游记/问答" v-model="text">
          <button @click="home()" :style="img"></button>
          <span>取消</span>
      </div>
      <span class="num">{{number}}</span>
      <div class="watch">
          <p>{{jilu|str}}</p>
          <p v-for="(v,i) in arr" :key="i">{{arr[i]|str}}</p>
      </div>
  </div>
</template>

<script>
export default {
    data(){
       return {
           img:{backgroundImage: "url(" + require("sta/btn.png") + ")"},
           text:"",
           jilu:"",
           arr:[]
       }
   },
   //watch监听data数据
   watch:{
       text(newval,oldval){
           this.jilu = newval; 
       }
   },
   //过滤器  敏感词过滤
   filters:{
       str:(val)=>{
           return val.replace(/靠/g,"*");
       }
   },
   //计算属性
   computed:{
       number(){
           if(this.jilu==""){
               return this.arr.length;
           }
           else{
               return this.arr.length+1;
           }
           
       }
   },
   methods:{
       fun(e){
           this.arr.push(this.text);
       },
       home(){
           this.$router.push("/home");
       }
   }
}
</script>

<style scoped>
    .sou{
        overflow: hidden;
    }
    .top{
        width: 90%;
        height: 0.8rem;
        margin: auto;
        margin-top: 0.25rem;
        position: relative;
    }
    .top input{
        width: 78%;
        height: 0.8rem;
        display: inline-block;
        font-size: 0.33rem;
        color: #666;
        background-color: #ececec;
        line-height: 0.8rem;
        border: none;
        border-radius: 0.2rem;
        padding-left: 0.8rem;
    }
    button{
        width: .933rem;
        height: .8rem;
        background: url(/img/btn.png) .213rem .106rem no-repeat;
        background-size: .453rem;
        outline: 0;
        border: 0;
        position: absolute;
        top: 4px;
        left: 0px;
    }
    span{
        color: #f39c11;
        font-size: 0.38rem;
        display: inline-block;
        height: 0.8rem;
        line-height: 0.8rem;
        margin-left: 0.2rem;
    }
    .watch p{
        width: 90%;
        margin: 0.35rem auto;
        margin-top: 0.15rem;
        line-height: 0.8rem;
        background-color: #ececec;
        font-size: 0.4rem;
        border-radius: 0.25rem;
        padding-left: 0.4rem;
    }
    .num{
        width: 0.5rem;
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        border-radius: 50%;
        background-color: #ececec;
        margin: 0.35rem 0;
        position: relative;
        left: 7.5rem;
    }
</style>